<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
    <style>
      #chart {
        width: 800px;
        height: 400px;
        margin-top: 10px;
      }
    </style>
  </head>
  <body>
    <div>
      top: <input type="text" id="top">
      left: <input type="text" id="left">
      right: <input type="text" id="right">
      bottom: <input type="text" id="bottom">
    </div>
    <div id="chart"></div>
    <script>
      let _left = 0
      let _top = 0
      let _bottom = 0
      let _right = 0
      const topInput = document.getElementById('top')
      const leftInput = document.getElementById('left')
      const bottomInput = document.getElementById('bottom')
      const rightInput = document.getElementById('right')
      const chartDom = document.getElementById('chart')
      const chart = echarts.init(chartDom)
      function addInputEvent(dom, key) {
        dom.addEventListener('input', function(e) {
          value = e.target.value
          switch(key) {
            case 'top':
              _top = value
              break
            case 'left':
              _left = value
              break
            case 'bottom':
              _bottom = value
              break
            case 'right':
              _right = value
              break
          }
          render()
        })
      }
      function render() {
        const option = {
          title: {
            text: '数据可视化',
            subtext: '数据可化课程'
          },
          xAxis: {
            type: 'category'
          },
          yAxis: {},
          dataset: {
            source: [
              ['一季度', 79, 100, '分类1', 50],
              ['二季度', 81, 112, '分类2', 60],
              ['三季度', 88, 96, '分类3', 55],
              ['四季度', 72, 123, '分类4', 70],
            ]
          },
          grid: [{
            left: _left,
            top: _top,
            right: _right,
            bottom: _bottom
          }],
          series: [{
            name: '折线图',
            type: 'line',
            encode: { x: 0, y: 2 }
          }]
        }
        chart.setOption(option)
      }
      window.onload = function() {
        topInput.value = _top
        leftInput.value = _left
        bottomInput.value = _bottom
        rightInput.value = _right
        addInputEvent(topInput, 'top')
        addInputEvent(leftInput, 'left')
        addInputEvent(bottomInput, 'bottom')
        addInputEvent(rightInput, 'right')
        render()
      }
    </script>
  </body>
</html>